<template>
  <div class="play-page" :class="{show: isShowPlayPage}">
    <div class="filter-bg"></div>
    <div class="play-content">

      <!-- 导航 -->
      <div class="play-nav">
        <div class="p-close" @click="setIsShowPlayPage(false)">
          <img class="auto-img" src="../assets/arrow-down.png" alt="">
        </div>
        <div class="pss">
          <div class="p-song">{{currentAudioInfo.songName}}</div>
          <div class="p-singer">{{currentAudioInfo.singerName}}</div>
        </div>
      </div>

      <!-- 歌词 -->
      <div class="song-word">

        <!-- 歌词盒子 -->
        <div class="sword-box" :style="{top: top + 'px'}">
          <div v-for="(item, index) in curLyric" :class="{'song-active': songLycActiveIndex === index}" :key="index" :ref="`lyc${index}`">{{item.lyc}}</div>
        </div>

      </div>

      <!-- 播放操作 -->
      <div class="play-control">
        <div class="time-progress">
          <div class="time-text">{{formatCurrentTime}}</div>
          <div class="play-progress" ref="playProgress">
            <div>
              <van-slider v-model="value" active-color="white" color="white" :max="progressWidth" @drag-start="dragStartProgress" @drag-end="dragEndProgress" @change="changeAudioCurrentTime">
                <template #button>
                  <div class="circle-btn"></div>
                </template>
              </van-slider>
            </div>
          </div>
          <div class="time-text">{{formatDuration}}</div>
        </div>
        <div class="play-ctl">
          <div class="play-i">
            <span class="iconfont icon-suijibofang"><svg class="icon " aria-hidden="true" >
            <use xlink:href="#icon-xunhuanbofang"> </use>    
          </svg></span>
          </div>
          <div class="play-i">
            <span class="iconfont icon-shangyishouge"><svg class="icon " aria-hidden="true" >
            <use xlink:href="#icon-shangyishouge"> </use>    
          </svg></span>
          </div>
          <div class="play-audio" @click="changeAudioStatus">
            <!-- 暂停：icon-zanting, 播放：icon-bofang-->
            <!-- <span class="iconfont" :class="[isPlay ? 'icon-zanting' : 'icon-bofang']"></span> -->
            <span class="iconfont" ><svg class="icon " aria-hidden="true" >
            <use :xlink:href="[isPlay ? '#icon-zanting' : '#icon-bofang']"> </use>    
          </svg></span>
          </div>
          <div class="play-i">
            <span class="iconfont icon-xiayishou"><svg class="icon " aria-hidden="true" >
            <use xlink:href="#icon-xiayishou"> </use>    
          </svg></span>
          </div>
          <div class="play-i">
            <span class="iconfont icon-bofanggedan"><svg class="icon " aria-hidden="true" >
            <use xlink:href="#icon-bofanggedan"> </use>    
          </svg></span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import { mapState, mapMutations, mapGetters } from 'vuex';
  export default {
    name: 'PlayPage',

    data() {
      return {
        //拖动进度条的值
        dragValue: 0
      };
    },

    created() {
      this.$nextTick(() => {
        let playProgress = this.$refs.playProgress;
        // console.log('playProgress ==> ', playProgress);
        this.setProgressWidth(playProgress.clientWidth);
      })
    },

    computed: {
      ...mapState(['isShowPlayPage', 'isPlay', 'currentAudioInfo', '$audio', 'progressWidth', 'duration', 'currentTime', 'currentLyric', 'top', 'songLycActiveIndex']),
      ...mapGetters(['formatDuration', 'formatCurrentTime']),

      //监听歌词的变化
      curLyric() {
        // console.log('监听歌词的变化');
        

        this.$nextTick(() => {
          
          if (this.currentLyric.length > 0) {

            //每一句歌词高度的数组
            let heightData = [];

            // console.log('this.$refs.lyc0[0] ==> ', this.$refs.lyc0[0]);

            //获取前5句歌词的总高度
            let height = 0;

            for (let i = 0; i < this.currentLyric.length; i++) {

              let currentHeight = this.$refs[`lyc${i}`][0].clientHeight;

              if (i < 5) {
                // console.log('currentHeight ==> ', currentHeight);
                height += currentHeight;
              }

              heightData.push(currentHeight);
              
            }

            //vuex: 修改歌词盒子的top, initTop
            this.setTop(height);
            this.setInitTop(height);

            //vuex: 修改每一个歌词高度的数组
            this.setLyricHeight(heightData)

            // console.log('height ==> ', height);
          }
        })

        

    
        return this.currentLyric;
      },

      //slider进度条的进度
      value: {

        set(v) {
          // console.log('进度条的进度发生改变v ==> ', v);
          this.dragValue = v;
          let currentTime = v / this.progressWidth * this.duration;
          //vuex: 修改currentTime
          this.setCurrentTime(currentTime);
          
        },

        get() {
          return this.currentTime / this.duration * this.progressWidth;
        }
      }

    },

    methods: {
      ...mapMutations(['setIsShowPlayPage', 'setAudioPlayStatus', 'setProgressWidth', 'setIsDragProgress', 'setCurrentTime', 'setTop', 'setLyricHeight', 'setInitTop', 'setIsChange']),

      //修改音频的播放状态
      changeAudioStatus() {

        if (this.currentAudioInfo.audioId === '') {
          return;
        }

        if (this.isPlay) {
          this.$audio.pause();
        } else {
          this.$audio.play();
        }

        this.setAudioPlayStatus(!this.isPlay);
      },

      //开始拖动进度条
      dragStartProgress() {
        // console.log('drag start');
        this.setIsDragProgress(true);
        this.setIsChange(true);
      },

      //结束拖动进度条
      dragEndProgress() {
        // console.log('drag end');
        this.setIsDragProgress(false);
        // console.log('this.dragValue ==> ', this.dragValue);
        //修改音频的当前播放时间
        this.$audio.currentTime = this.dragValue / this.progressWidth * this.duration;

        setTimeout(() => {
          this.setIsChange(false);
        }, 500)
      },

      //点击进度条改变音频播放进度
      changeAudioCurrentTime(value) {
        // console.log('点击进度条改变音频播放进度 value ==> ', value);
        this.setIsChange(true);
        //修改音频进度
        let currentTime = value / this.progressWidth * this.duration;
        this.$audio.currentTime = currentTime;

        setTimeout(() => {
          this.setIsChange(false);
        }, 500)
      }
    }
  }
</script>

<style lang="less" scoped>
  .play-page{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    // background-color: #ddd;
    z-index: 999;
    transform-origin: right bottom;
    transform: rotate(90deg);
    overflow: hidden;
    transition: transform .4s ease-out;

    &.show{
      transform: rotate(0deg);
    }
    
    .sword-box{
      // height: 300px;
      // background-color: #aaa;
      position: relative;
      // top: 145px;
      >div{
        text-align: center;
        color: rgba(255, 255, 255, .5);
        padding: 5px 0;
        font-size: 14px;
        &.song-active{
          color: #e8e8e8;
        }
      }
    }
    .play-i{
      width: 26px;
      height: 26px;
      // background-color: #ddd;
      >span{
        font-size: 26px;
        color: #e8e8e8;
      }

    }
    .play-audio{
      width: 50px;
      height: 50px;
      // background-color: #ddd;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #e8e8e8;
      text-align: center;
      >span{
        font-size: 36px;
        color: #e8e8e8;
        
        line-height: 50px;
      }
    }
    .play-ctl{
      height: 60px;
      // background-color: #ddd;
      margin: 30px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .circle-btn{
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 50%;
    }
    .play-progress{
      width: calc(100% - 36px - 36px - 20px);
      margin: 0 10px;
      height: 20px;
      // background-color: #999;
      display: flex;
      align-items: center;
      >div{
        width: 100%;
      }
    }
    .time-text{
      font-size: 10px;
      color: #e8e8e8;
      width: 36px;
      text-align: center;
    }
    .time-progress{
      display: flex;
      align-items: center;
      padding: 0 10px;
    }
    .song-word{
      height: calc(100% - 50px - 150px - 20px - 40px);
      // background-color: #ddd;
      overflow: hidden;
      margin: 20px 10px;
    }
    .play-control{
      height: 150px;
      // background-color: #fff;
      padding: 10px 0;
    }
    .pss{
      text-align: center;
    }
    .play-nav{
      height: 50px;
      // background-color: #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .p-close{
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        width: 24px;
        height: 24px;
        // background-color: #ddd;
      }
      .p-song{
        color: #fff;
        font-size: 14px;
      }
      .p-singer{
        color: #ddd;
        font-size: 12px;
      }
    }
    .filter-bg{
      position: absolute;
      width: 100%;
      height: 100%;
      background: url("https://p2.music.126.net/7FrR0ugq1og_VQqH5xDLHw==/109951165056806228.jpg") no-repeat center center;
      background-size: cover;
      filter: blur(30px);
      z-index: 1;
      transform: scale(1.5); 
      transform-origin: center center;
    }
    .play-content{
      height: 100%;
      background-color: rgba(0, 0, 0, .35);
      position: relative;
      z-index: 2;
    }
  }
</style>